<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gl">

	<head>
		<title>cSans - Fexible demo</title>

		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="gl" />
		<meta name="author" content="A navalla suíza - http://anavallasuiza.com" />

		<link rel="stylesheet" href="../csans/csans.css" type="text/css" />
		<link rel="stylesheet" href="../csans/grid-950-24-10/css/csans-grid-950-24-10.css" type="text/css" />
		<link rel="stylesheet" href="../csans/flexible/csans-flexible.css" type="text/css" />
		
		<style type="text/css">
			#examples div { color:#FFF; border-top: solid 1px #FFF; }
			
			#examples .f20 { background-color: #202020; }
			#examples .f25 { background-color: #252525; }
			#examples .f33 { background-color: #333333; }
			#examples .f40 { background-color: #404040; }
			#examples .f50 { background-color: #505050; }
			#examples .f60 { background-color: #606060; }
			#examples .f66 { background-color: #666666; }
			#examples .f75 { background-color: #757575; }
			#examples .f80 { background-color: #808080; }
		</style>
	</head>

	<body>
		<!-- <div class="row t4 b8">
			<h1 class="f50">cSans flexible demo</h1>
			<p class="f50 t4">
				Define widths in percent value.
			</p>
		</div> -->
		
		<div id="examples">
			<div class="f50"><p>f50</p></div>
			<div class="f25"><p>f25</p></div>
			<div class="f25"><p>f25</p></div>

			<div class="f33"><p>f33</p></div>
			<div class="f33"><p>f33</p></div>
			<div class="f33"><p>f33</p></div>
		
			<div class="f75"><p>f75</p></div>
			<div class="f25"><p>f25</p></div>
		
			<div class="f33"><p>f33</p></div>
			<div class="f66"><p>f66</p></div>
		
			<div class="f20"><p>f20</p></div>
			<div class="f20"><p>f20</p></div>
			<div class="f20"><p>f20</p></div>
			<div class="f40"><p>f40</p></div>
			
			<div class="f80"><p>f80</p></div>
			<div class="f20"><p>f20</p></div>
			
			<div class="f60"><p>f60</p></div>
			<div class="f20"><p>f20</p></div>
			<div class="f20"><p>f20</p></div>
		
			<div class="f33"><p>f33</p>
				<div class="f33"><p>f33</p>
					<div class="f33"><p>f33</p>
						<div class="f33"><p>f33</p></div>
						<div class="f33"><p>f33</p></div>
						<div class="f33"><p>f33</p></div>
					</div>
					<div class="f33"><p>f33</p></div>
					<div class="f33"><p>f33</p></div>
				</div>
				<div class="f33"><p>f33</p></div>
				<div class="f33"><p>f33</p></div>
			</div>
			<div class="f66"><p>f66</p>
				<div class="f50"><p>f50</p>
					<div class="f50"><p>f50</p>
						<div class="f50"><p>f50</p></div>
						<div class="f50"><p>f50</p></div>
					</div>
					<div class="f50"><p>f50</p></div>
				</div>
				<div class="f50"><p>f50</p>
					<div class="f25"><p>f25</p></div>
					<div class="f25"><p>f25</p></div>
					<div class="f25"><p>f25</p></div>
					<div class="f25"><p>f25</p></div>
				</div>
			</div>
		</div>
		
	</body>
</html>